<template>
   
   <div  class="wholescreen">
      <div class="top-button">
        <el-button type="success"  @click="SaveJob">保存</el-button>
        <el-button type="danger"  >取消</el-button>
	   </div>
	
	
      <el-row :gutter="20" >
		  <el-col :span="24" style="padding-left:100px;padding-top:10px;">
		   
		       <el-card class="box-card" style="width:80%" >
			        <div slot="header" class="clearfix">
                       <span style="line-height: 20px;text-align:left;">基本设置</span>
                    </div>
					<div  class="text item" style="padding:5px">
					    <el-row :gutter="20" >
						      <el-col :span="5" style="padding:5px">
		                         项目名称
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input v-model="JobName"></el-input>
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                         描述
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
		                          <el-input type="textarea" :rows="2"  v-model="JobMemo"></el-input>
		                      </el-col>
						</el-row>	
					</div>
			   </el-card>
			
		  </el-col>	
		
		<el-col :span="24" style="padding-left:100px;padding-top:10px;">
		   
		       <el-card class="box-card" style="width:80%" >
			        <div slot="header" class="clearfix">
                       <span style="line-height: 20px;text-align:left;">源码管理</span>
                    </div>
					<div  class="text item" style="padding:5px">
					   <el-button type="success"    @click="NewVersionControl">新增Version Control</el-button>
					</div>
					<div  v-for="o in VersionControls" class="text item" style="padding:5px">
					     <el-card class="box-card" >
						    <el-row :gutter="20" >
						      <el-col :span="5" style="padding:5px">
		                         版本管理类型
		                      </el-col>	
							    <el-col :span="19" style="padding:5px">
		                           <el-select  placeholder="请选择"  v-model="o.Type" >
                                       <el-option
                                         label="GIT"
                                         value="GIT">
                                       </el-option>
									   <el-option
                                         label="SVN"
                                         value="SVN">
                                       </el-option>
                                </el-select>
		                      </el-col>	
							
							   <template v-if="o.Type=='GIT'">
							      <el-col :span="5" style="padding:5px">
		                            GIT 版本
		                          </el-col>	
							      <el-col :span="19" style="padding:5px">
		                           <el-select  placeholder="请选择"  v-model="o.GitId" >
                                       <el-option v-for="g in DropDownConfig.GTool.Gits"
                                         :label="g.GitAlias"
                                         :value="g.GitId">
                                       </el-option>
                                   </el-select>
		                         </el-col>	
							  </template>
							  <template v-if="o.Type=='SVN'">
							      <el-col :span="5" style="padding:5px">
		                            SVN 版本
		                          </el-col>	
							      <el-col :span="19" style="padding:5px">
		                           <el-select  placeholder="请选择"  v-model="o.SvnId" >
                                       <el-option v-for="g in DropDownConfig.GTool.Svns"
                                         :label="g.SvnAlias"
                                         :value="g.SvnId">
                                       </el-option>
                                   </el-select>
		                         </el-col>	
							  </template>
							  <el-col :span="5" style="padding:5px">
		                         Url地址
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
							     <el-input  v-model="o.Url" ></el-input>
		                      </el-col>
							  <el-col :span="5" style="padding:5px">
		                         代码相对目录
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
							     <el-input  v-model="o.Path" ></el-input>
		                      </el-col>
							
							  <el-col :span="5" style="padding:5px">
		                         用户名
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
							     <el-input  v-model="o.User" ></el-input>
		                      </el-col>
							
							  <el-col :span="5" style="padding:5px">
		                         密码
		                      </el-col>	
							  <el-col :span="19" style="padding:5px">
							     <el-input type="password"  v-model="o.Password" ></el-input>
		                      </el-col>
							
							  <el-col :span="19" style="padding:5px">
		                         
		                      </el-col>	
							  <el-col :span="5" style="padding:5px">
		                          <el-button type="danger" @click="DeleteVersionControl(o.Id)" >删除Version Control</el-button>
		                      </el-col>
						    </el-row>
						 </el-card>
					</div>
			   </el-card>
			
		  </el-col>	
	  </el-row>	
   </div>
</template>

<script>

    
	
	import Vue from 'vue';
	import { Message } from 'element-ui';
	import {Col,Row ,Card ,Button,Input,Select ,Option} from 'element-ui'
	Vue.component(Col.name, Col)
	Vue.component(Row.name, Row)
    Vue.component(Card.name, Card)
	Vue.component(Button.name, Button)
	Vue.component(Input.name, Input)
	Vue.component(Select.name, Select)
	Vue.component(Option.name, Option)
	import 'element-ui/lib/theme-default/button.css';
	import 'element-ui/lib/theme-default/card.css';
	import 'element-ui/lib/theme-default/row.css';
	import 'element-ui/lib/theme-default/col.css';
	import 'element-ui/lib/theme-default/input.css';
	import 'element-ui/lib/theme-default/option.css';
	import 'element-ui/lib/theme-default/select.css';
	import 'element-ui/lib/theme-default/message.css';
	
    const uuid = require('uuid');
	import {JobService} from '../apis/JobService.js';
	
    export default {
        data () {
            return {
				JobId :null,
				JobName :"", //名称
				JobMemo :"",   //描述
				VersionControls :[],
				DropDownConfig:{}
            }
        },
		components:{},
        mounted() {
			this.$store.dispatch('change_page_name',"新建Job");//改变当前页面标题
			
			const JobId =this.$vnode.data.attrs?this.$vnode.data.attrs.JobId :null;
			if(JobId){
						this.loadData(JobId)
			} else {
						this.initData()
			}
        },
		watch: {
               '$vnode' (to, from) {
                    const JobId =to.data.attrs.JobId
					if(JobId){
						this.loadData(JobId)
					} else {
						this.initData()
					}
               }
        }
		,methods:{

                
            NewVersionControl(){
				this.VersionControls.push({Id:uuid.v1() ,Type:"",Url:"" ,Path :"",User:"" ,Password:"",GitId:"",SvnId:"" })
			},
			SaveJob(){
				if(! this.JobId  || this.JobId==null || this.JobId=="" ){
					 this.JobId =uuid.v1()
				}
				const me=this;
				JobService.SaveJob({
						JobId :this.JobId,
						JobName :this.JobName,
						JobMemo :this.JobMemo,
						VersionControls :this.VersionControls
					}).then(ret=>{
						if(ret.result){
							Message({
                               message: '保存成功',
                               type: 'success',
							   duration: 800,
							   onClose: (c)=>{ me.$router.push({path:"/"}) }
                            });
						} else {
							Message({
                               message: '保存失败',
							   duration: 800,
                               type: 'warn'
                            });
						}
					})
			},
			loadData(JobId){
				 var me=this;
				 JobService.GetJobDropDown().then(ret=>{
						console.log(ret)
						me.DropDownConfig =ret
			     })
			},
			initData(){
				 var me=this;
				 JobService.GetJobDropDown().then(ret=>{
						console.log(ret)
						me.DropDownConfig =ret
			     })
			}

		}
    }
</script>

<style>
.top-button{
   position: fixed;
   right: 50px;
   bottom: 200px; 
   z-index:999;
}

</style>